{% extends 'wxchat/wxbase.html' %}{% load static %}
{% block swiper %}

{% endblock swiper %}
{% block tabpanel %}
        <div class="weui-tab__content" id="tab1">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                    <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">寻找宠物列表</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>

                </div>
                <div class="weui-panel__bd" id="dogloss"></div>
                <div class="weui-panel__ft">
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="doglossmore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>

        <div class="weui-tab__content" id="tab2">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                     <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">寻找主人列表</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd" id="dogowner"></div>
                <div class="weui-panel__ft" >
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogownermore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
{% endblock tabpanel %}
 {% block tabbar %}
        <a href="#tab1" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-chongwu3" ></i>
            </div>
            <p class="weui-tabbar__label">寻宠物</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
               <i class="icon iconfont icon-man8"></i>
            </div>
            <p class="weui-tabbar__label">寻宠主</p>
        </a>

{% endblock tabbar %}
{% block add %}
{#    href="{% url 'dog-loss-nav' %}?next={{ request.get_full_path }}"#}
     <a id="pet_loss" class="circle" href="javascript:;">
          <div class="circle_icon"><i class="icon iconfont icon-zengjia16"></i></div>
          <p>发布</p>
     </a>
    <div class="weui-skin_android" id="actionsheet" style="display: none">
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">
                    <a href="{% url 'dog-loss-add' %}?next={{ next }}" >
                        <img  src="{% static 'wxchat/images/xc.png' %}">
                        <p><h4>寻找宠物<h4></p>
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                     <a href="{% url 'dog-owner-add' %}?next={{ next }}" >
                        <img src="{% static 'wxchat/images/xz.png' %}">
                        <p><h4>寻找主人<h4></p>
                    </a>
                </div>
            </div>
        </div>
    </div>

{% endblock add %}
{% block bottomjs %}

    {{ block.super }}
    <script type="application/javascript">
     nextUrl = '{% url 'dog-loss-list' %}';
     dogOwnerUrl = '{% url 'dog-owner-list' %}';

    var loading = weui.loading('加载中...');
     ///缓存滚动条位置
     $('.weui-tab__panel').scroll(function(){
            if($(this).scrollTop() !=0 ){
                sessionStorage.setItem('offsetTop',$(this).scrollTop());
            }
    });

    $(function(){
        defIndex = sessionStorage.getItem('loss');
        console.log('defindex='+ defIndex);
        weui.tab('#tab',{
            defaultIndex: defIndex ==null?0:defIndex,
            onChange: function(index){
                sessionStorage.setItem('loss',index);
            }
        });

        $('#doglossmore').on('click',function(){
            getDataList( nextUrl );
        });

        $('#dogownermore').on('click',function(){
            getDogOwnerList( dogOwnerUrl );
        });
        getDataList( nextUrl );
        getDogOwnerList(dogOwnerUrl);

    });
    function getDataList(url){
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogloss'),
          success: function(data){
              nextUrl = data.next;
              console.log(nextUrl);
              appendItem(data.results);
              loading.hide();
              if(nextUrl !=null) {
                  $('#doglossmore').css('display','');
              }
              else
              {
                  $('#goodsmore').css('display','none');
              }
              setScollPos();
          },
          error: function(xhr, type,error){
              console.log(type);
              loading.hide();
          }
        });
    }

    function appendItem(results){
        $.each(results,function(index,item){
            var img_url = item.thumb_url;

            if(img_url == null){
                img_url = '<i class="icon iconfont icon-pet6  weui-media-box__thumb" ></i>';
            }
            else {
                img_url = '<img class="weui-media-box__thumb" src="' + img_url + '">'
            }

            var result ='';
            if(item.result == 1)
            {
                result = '<span class="r"><i class="weui-icon-success-no-circle"></i></span>';
            }

          var seximg = getSexImage(item);

          lossitem =  '<a href="/wechat/doglossdetail/' + item.id + '" class="weui-media-box weui-media-box_appmsg">' +
                            '<div class="weui-media-box__hd">' + img_url + '</div>'+
                            '<div class="weui-media-box__bd">' +
                               '<h4 class="weui-media-box__title">'+ seximg + item.typeid + result +'</h4>' +
                               '<ul class="weui-media-box__info">' +
								  '<li class="weui-media-box__info__meta">时间: ' + item.lostdate + '</li>' +
								'</ul>' +
                               '<p class="weui-media-box__desc">地点: '+ item.lostplace +'</p>'  +
                             '</div>' +
                        '</a>';
            $('#dogloss').append( lossitem );
        }) ;
    }

    function getDogOwnerList(url){
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogowner'),
          success: function(data){
              dogOwnerUrl = data.next;
              appendDogOwnerItem(data.results);
              if( dogOwnerUrl != null )
              {
                  $('#dogownermore').css('display','');
              }
              else
              {
                  $('#goodsmore').css('display','none');
              }
              setScollPos();
          },
          error: function(xhr, type,error){
              console.log(type);
          }
        });
    }

    function appendDogOwnerItem(results){
        $.each(results,function(index,item){
            var img_url = item.thumb_url;

            if(img_url == null){
                img_url = '<i class="icon iconfont icon-pet6  weui-media-box__thumb" ></i>';
            }
            else {
                img_url = '<img class="weui-media-box__thumb" src="' + img_url + '">'
            }

            var result ='';
            if(item.result == 1)
            {
                result = '<span class="r"><i class="weui-icon-success-no-circle"></i></span>';
            }
          lossitem =  '<a  href="/wechat/dogownerdetail/' + item.id + '" class="weui-media-box weui-media-box_appmsg">' +
                            '<div class="weui-media-box__hd">' + img_url + '</div>'+
                            '<div class="weui-media-box__bd">' +
                               '<h4 class="weui-media-box__title">品种:'+ item.typeid + result +'</h4>' +
                               '<ul class="weui-media-box__info">' +
								  '<li class="weui-media-box__info__meta">时间:' + item.finddate +'</li>' +
								'</ul>' +
                               '<p class="weui-media-box__desc">地点:'+ item.findplace +'</p>'  +
                             '</div>' +
                        '</a>';
            $('#dogowner').append( lossitem );
        }) ;
    }
    ////设置滚动条位置
    function setScollPos(){
        var _offset = sessionStorage.getItem("offsetTop");//获取滚动位置
        $('.weui-tab__panel').scrollTop(_offset);
    }

     // android
    $(function(){
        var $actionSheet = $('#actionsheet');
        var $mask = $actionSheet.find('.weui-mask');

        $("#pet_loss").on('click', function(){
            $actionSheet.fadeIn(200);
            $mask.on('click',function () {
                $actionSheet.fadeOut(200);
            });
        });
    });

{#    $('#pet_loss').on("click",function(){#}
{#        weui.actionSheet([#}
{#         {#}
{#             label: ' <i class="icon iconfont icon-rongquanmaichu1 icon_pink"></i> 宠物出售',#}
{#             className:'color-primary',#}
{#             onClick: function () {#}
{#                 window.location.href="{% url 'dog-sale-add' %}?next={{ request.get_full_path }}";#}
{#             }#}
{#         }, {#}
{#             label: '<i class="icon iconfont icon-mairu1 icon_pink" ></i> 宠物求购',#}
{#             className:'color-success',#}
{#             onClick: function () {#}
{#                 window.location.href="{% url 'dog-buy-add' %}?sex=1&next={{ request.get_full_path }}";#}
{#             }#}
{#         },#}
{#         ]);#}
{#    });#}

    </script>
{% endblock bottomjs %}
